@import '../../../styles/util'

@mixin handler-disabled
  color: $text-mute !important
  cursor: not-allowed

.fui-input-number
  position: relative

  &-handler
    text-align: center
    line-height: 0
    height: 50%
    overflow: hidden
    color: $brand-info
    position: relative
    transition: all 0.1s linear
    display: block
    width: 100%
    font-weight: bold
    &:active
      background: $bg-main

    &:hover &-up-inner,
    &:hover &-down-inner

      svg
        fill: $brand-primary

  &-handler-wrap
    position: absolute
    top: 1px
    right: 1px
    width: 1.5rem
    height: calc(2rem - 2px)
    opacity: 0
    background: $bg-body
    border-left: 1px solid $input-border-color
    border-radius: 0 2px 2px 0
    transition: opacity 0.24s linear 0.1s
    z-index: 2

  &:hover &-handler-wrap
    opacity: 1

  &-handler-wrap:hover &-handler
    height: 40%

  &-handler-up-inner,
  &-handler-down-inner
    line-height: 0.75rem
    user-select: none
    position: absolute
    width: 1rem
    height: 0.75rem
    transition: all 0.1s linear
    right: 0.25rem

  &-handler-up
    cursor: pointer

    &-inner
      top: 50%
      margin-top: -6px

      svg
        margin-top: -2px

    &:hover
      height: 60% !important

  &-handler-down
    border-top: 1px solid $input-border-color
    cursor: pointer

    &-inner
      top: 50%
      margin-top: -6px

      svg
        margin-top: -1px

    &:hover
      height: 60% !important

  &-input
    width: 100%
    -moz-appearance: textfield
    transition: all 0.3s linear

    input
      margin: 0
      padding: 0
      display: inline-block

  &-handler-down-disabled,
  &-handler-up-disabled,
    .fui-input-number-handler-down-inner,
    .fui-input-number-handler-up-inner
      @include handler-disabled

.fui-input-number-disabled,
.fui-input-number-readonly

  .fui-input-number-handler-wrap
    display: none
